<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
		/* 练习 1圆形 2.三角形
		 思路1：宽高与边框倒角一致*/
		div#cirle{
				   width: 400px;
				   height: 400px;
				   border: 1px solid red;
				   border-radius: 50%;
					   /*边框阴影 box-shadow 属性*/
					   box-shadow: 5px 5px 50px 50px red inset;
		} 
		/* 思路2：div#triangle
		             css中抓到div 【斜线】
				        左边框 50像素实现红色
						右边框 50像素实现红色
						下边框 50像素实现红色
		注意：先别加宽高 transparent透明色
		*/
	   
	   div#triangle{
		   width: 0;
		 /*  border-left:50px solid transparent;
		   border-right: 50px solid transparent;
		   border-bottom: 50px solid black;
		   /*两行：倒三角，蓝色， 透明度 .3
		   提醒：所有边框：50px solid transparent
		        上边框颜色改成蓝色  0.0,255
		   */
		  border: 50px solid transparent;
		  border-right-color: rgba(0,0,255,.3);
	   }
	   /* outline 边框轮廓 只针对input 元素*/
	   input{
		   outline:1px solid red;
	   }
	   /* 实际应用：通配选择器 去掉轮廓
		*{outline：0;}
		*/
	 </style>
	 
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>